<template>
  <div class="app-container">
   
    <el-card class="box-card">
      <div slot="header" style="display: flex;justify-content: space-between;">
        <span>车辆详情</span>
        <el-button>返回</el-button>
      </div>
      <div class="top-card">

        <el-image :src="src" style="width: 100px; height: 100px"></el-image>
        <!-- <el-empty :image-size="150" description="暂无图片"></el-empty> -->

        <div class="top-card-right">
          <div style="font-size: 16px;">

            <span style="font-weight: 600;">车架号：</span><span>{{ this.routeQuery.vinNo }}</span>


          </div>
          <div><span>品牌/车型/车款：</span><span>{{
            `${this.routeQuery.brandName}/${this.routeQuery.seriesName}/${this.routeQuery.modelName}` }}</span></div>
          <div><span>车辆归属城市：</span><span>{{ this.routeQuery.city }}</span></div>
        </div>
      </div>
    </el-card>

    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="维保详情" name="first">

        <el-card class="box-card">
          <div slot="header">
            <span>车辆信息</span>
          </div>
          <el-row>
            <el-col :span="6" class="box-card-inp">
              <div class="inp-name">客户名称：</div>
              <el-input disabled></el-input>
            </el-col>
            <el-col :span="6" class="box-card-inp">
              <div class="inp-name">车辆状态：</div>
              <el-input disabled></el-input>
            </el-col>
            <el-col :span="6" class="box-card-inp">
              <div class="inp-name">车辆订单号：</div>
              <el-input disabled></el-input>
            </el-col>
            <el-col :span="6" class="box-card-inp">
              <div class="inp-name">车辆所属公司：</div>
              <el-input disabled></el-input>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6" class="box-card-inp">
              <div class="inp-name">车辆当前里程数：</div>
              <el-input disabled></el-input>
            </el-col>
            <el-col :span="6" class="box-card-inp">
              <div class="inp-name">车辆用途：</div>
              <el-input disabled></el-input>
            </el-col>

            <el-col :span="6" class="box-card-inp">
              <div class="inp-name">车辆所在城市：</div>
              <el-input disabled></el-input>
            </el-col>
          </el-row>
        </el-card>
        <el-card class="box-card">
          <div slot="header">
            <span>维保信息</span>

          </div>
          <el-row>
            <el-col :span="6" class="box-card-inp">
              <div class="inp-name">客户名称：</div>
              <el-input disabled></el-input>
            </el-col>
            <el-col :span="6" class="box-card-inp">
              <div class="inp-name">预计维保开始时间：</div>
              <el-input disabled></el-input>
            </el-col>
            <el-col :span="6" class="box-card-inp">
              <div class="inp-name">预计维保结束时间：</div>
              <el-input disabled></el-input>
            </el-col>
            <el-col :span="6" class="box-card-inp">
              <div class="inp-name">故障描述：</div>
              <el-input disabled></el-input>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6" class="box-card-inp">
              <div class="inp-name">维保厂名：</div>
              <el-input disabled></el-input>
            </el-col>
            <el-col :span="6" class="box-card-inp">
              <div class="inp-name">维保厂报价：</div>
              <el-input disabled></el-input>
            </el-col>

            <el-col :span="6" class="box-card-inp">
              <div class="inp-name">维保价格用户支付金额：</div>
              <el-input disabled></el-input>
            </el-col>
            <el-col :span="6" class="box-card-inp">
              <div class="inp-name">维保价格平台支付金额：</div>
              <el-input disabled></el-input>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6" class="box-card-inp">
              <div class="inp-name">维保价格保险支付金额：</div>
              <el-input disabled></el-input>
            </el-col>
            <el-col :span="6" class="box-card-inp">
              <div class="inp-name">总金额：</div>
              <el-input disabled></el-input>
            </el-col>

          </el-row>
          <el-row>
            <el-col class="box-card-inp">
              <div class="inp-name">备注：</div>
              <el-input type="textarea" :rows="2">
              </el-input>
            </el-col>

          </el-row>
        </el-card>
        <el-card class="box-card">
          <div slot="header">
            <span>维保项目明细</span>

          </div>
          <p>维保合计费用：¥100.00</p>
          <el-table v-loading="false" :data="costDetailList" border>
            <el-table-column label="序号" align="center" type="index" width="60">

            </el-table-column>
            <el-table-column v-for=" i in costDetailCol" :label="i.label" align="center" :prop="i.prop"
              :width="i.width"></el-table-column>

          </el-table>

        </el-card>
        <el-card class="box-card">
          <div slot="header">
            <span>审批记录</span>

          </div>
          <el-steps direction="vertical" :active="1">
            <el-step title="步骤 1"></el-step>
            <el-step title="步骤 2"></el-step>
            <el-step title="步骤 3" description="这是一段很长很长很长的描述性文字"></el-step>
          </el-steps>
        </el-card>

      </el-tab-pane>
      <el-tab-pane label="维修记录" name="second">
        <el-card>
          <div slot="header">
            <el-row>
              <el-col :span="8" class="box-card-inp">
                <div class="inp-name">车辆维修总次数：</div>
                <div></div>
              </el-col>
              <el-col :span="8" class="box-card-inp">
                <div class="inp-name">车辆维修总预算：</div>
                <div></div>
              </el-col>
              <el-col :span="8" class="box-card-inp">
                <div class="inp-name">车辆剩余预估费用：</div>
                <div></div>
              </el-col>
            </el-row>

          </div>
          <el-table v-loading="false" :data="historyList" border>
            <el-table-column label="操作" align="center" width="80">
              <template slot-scope="scope">
                <el-button size="mini" type="text" v-hasPermi="['demo:demo:remove']">查看</el-button>

              </template>
            </el-table-column>
            <el-table-column v-for=" i in historyCol" :label="i.label" align="center" :prop="i.prop"
              :width="i.width"></el-table-column>

          </el-table>
        </el-card>



      </el-tab-pane>

    </el-tabs>
  </div>
</template>
    
<script>
import { getModelData, getBrandName, getSeriesName, getModelName, getSeriesGroupList, carBrandAdd, updateCar, getCarBasic, delModel } from "@/api/wxgl/maintenanceDetailsApi";
import { getToken } from "@/utils/auth";

export default {
  name: "MaintenanceDetails",
  components: {
  
  },
  data() {
    return {
      src:"",
      routeQuery: {},
      activeName: 'first',
      costDetailList: [],
      costDetailCol: [
        {
          prop: "carNo",
          label: "维修项目名称",
        },
        {
          prop: "vinNo",
          label: "金额/元",
        },
        {
          prop: "brandName",
          label: "品牌",

        },

        {
          prop: "modelName",
          label: "型号",

        },
        {
          prop: "seriesName",
          label: "数量",
        },
        {

          label: "详细信息",
          prop: "businessType",
        },
      ],
      historyList: [],
      historyCol: [
        {
          prop: "carNo",
          label: "维修类型",
        },
        {
          prop: "vinNo",
          label: "客户名称",
        },
        {
          prop: "brandName",
          label: "预计开始时间",

        },

        {
          prop: "modelName",
          label: "预计结束时间",

        },
        {
          prop: "seriesName",
          label: "实际际开始时间",
        },
        {

          label: "实际结束时间",
          prop: "businessType",
        },
        {
          prop: "seriesName",
          label: "实际际开始时间",
        },
        {

          label: "实际结束时间",
          prop: "businessType",
        },
        {
          prop: "seriesName",
          label: "车辆归属城市",
        },
        {

          label: "所在城市",
          prop: "businessType",
        },
        {

          label: "维修费用",
          prop: "businessType",
        },
      ],

      //按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: false,

      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,

      // 用户导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/car/carBasic/importTemplate/importData"
      },
      isNew: true, // 新增编辑查看控制
      // green_type_namelist
      greenTypeList: [
        {
          value: '0', label: '不适用'
        },
        {
          value: '1', label: '纯电动'
        },
        {
          value: '2', label: '插电式混动'
        },
        {
          value: '4', label: '增程式混动'
        },
        {
          value: '8', label: '燃料电池'
        },

      ],
      fuelTypeList: [
        {
          value: '0', label: '汽油'
        },
        {
          value: '1', label: '柴油'
        },
        {
          value: '2', label: '电力'
        },
        {
          value: '3', label: '油电'
        },
        {
          value: '4', label: '油气'
        },
        {
          value: '5', label: '天然气'
        },
        {
          value: '6', label: '氢能源'
        },
        {
          value: '7', label: '甲醇'
        },

      ],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        brandName: "",
        seriesName: "",
        modelName: "",
        styleModel: "",
        IS_AVAILABLE: "",
      },

      total: 0,
      dataList: [],
      getBrandNameList: [],
      getSeriesNameList: [],
      getModelNameList: [],
      seriesGroupList: [],

      // 表单参数
      form: {
        brandId: "",
        brandName: "",
        seriesName: "",
        seriesId: "",
        modelId: "",
        modelName: "",
        shortName: "",
        seriesGroupName: "",
        seriesGroupId: "",
        price: "",
        year: "",
        makerId: "",
        makerName: "",

        // 车辆信息
        liter: "",
        dischargeStandard: "",
        fuelTypeId: "",
        fuelTypeName: "",
        enginePower: "",
        enginePowerKw: "",
        isGreen: "",
        modelCode: "",
        driveName: "",
        driveType: "",
        modelStatus: "",
        gearType: "",
        gearName: "",
        greenTypeId: "",
        greenTypeName: "",
        makerDate: "",
        minRegYear: "",
        maxRegYear: "",
        stopMakeYear: "",
        intake: "",
        seatNumber: "",
        bodyType: "",
        doorNumber: "",
        carStruct: "",
        isParallel: "",
        priceAllowance: "",
      },
      // 表单校验
      rules: {
        testKey: [
          { required: true, message: "key键不能为空", trigger: "blur" }
        ],
        value: [
          { required: true, message: "值不能为空", trigger: "blur" }
        ],
      }
    };
  },
  watch: {
    // $route: {
    //   handler: function (val, oldVal) {
    //     console.log(val);
    //   },
    //   // 深度观察监听
    //   deep: true
    // }

  },
  created() {
    this.routeQuery = this.$route.query
    // this.getList();
    // this.getBrandNames()

  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    /** 查询测试单表列表 */
    getList() {
      this.loading = true;


      getModelData(this.queryParams).then(res => {
        if (res.code == "200") {
          const { rows, total } = res
          this.dataList = rows
          this.total = total
          this.loading = false;
        }



      });
    },
    changeFuelType(val) {
      if (val) {
        if (this.fuelTypeList.length > 0) {
          let arr = this.fuelTypeList.filter(v => {
            return v.value == val
          })
          this.form.fuelTypeName = arr[0].label

        }
      } else {
        this.form.fuelTypeName = ""
      }
    },
    changeGreenType(val) {
      if (val) {
        if (this.greenTypeList.length > 0) {
          let arr = this.greenTypeList.filter(v => {
            return v.value == val
          })
          this.form.greenTypeName = arr[0].label

        }
      } else {
        this.form.greenTypeName = ""
      }
    },
    // 获取车系组
    getSeriesGroup(obj) {
      getSeriesGroupList(obj).then((res) => {
        this.seriesGroupList = res.map((v) => {
          if (typeof v.id === 'number') {
            v.id == `${v.id}`
          }
          return v
        })
      })
    },
    // 选择车系组
    changeSeriesGroup(val) {
      if (val) {
        if (this.seriesGroupList.length > 0) {
          let arr = this.seriesGroupList.filter(v => {
            return v.id == val
          })
          this.form.seriesGroupName = arr[0].seriesGroupName

        }
      } else {
        this.form.seriesGroupName = ""
      }
      this.$forceUpdate();
    },
    // 品牌名称组
    getBrandNames() {
      getBrandName({ brandName: "" }).then(res => {
        this.getBrandNameList = res || []
      })
    },
    changeBrand(id) {

      if (id) {
        this.seriesGroupList = []

        this.getSeriesNameList = []
        this.form.seriesId = ""
        this.form.seriesName = ""

        this.form.modelName = ""
        this.form.seriesGroupId = ""
        this.form.seriesGroupName = ""
        if (this.getBrandNameList.length > 0) {
          let arr = this.getBrandNameList.filter(v => {
            return v.id == id
          })
          this.form.brandName = arr[0].name
          this.getSeriesGroup({ brandName: this.form.brandName, carBrandId: id })
        }
        this.getSeriesNames(id)


      } else {
        this.form.seriesGroupId = ""
        this.form.seriesGroupName = ""
        this.form.brandName = ""
        this.form.seriesId = ""
        this.form.seriesName = ""

        this.form.modelName = ""

        this.getSeriesNameList = []
        this.seriesGroupList = []
      }

    },
    // 根据品牌id查询车系名称组
    getSeriesNames(id) {
      getSeriesName(id).then(res => {

        this.getSeriesNameList = res || []


      })
    },
    changeSeries(id) {
      if (id) {

        this.form.modelName = ""
        if (this.getSeriesNameList.length > 0) {
          let arr = this.getSeriesNameList.filter(v => {
            return v.id == id
          })
          this.form.seriesName = arr[0].name
        }
        // this.getModelNames(id)


      } else {

        this.form.seriesId = ""
        this.form.seriesName = ""

        this.form.modelName = ""
      }

    },
    // // 根据车系名称组查车型
    // getModelNames(id) {
    //   getModelName(id).then(res => {

    //     this.getModelNameList = res || []

    //   })
    // },



    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: "",
        brandId: "",
        brandName: "",
        seriesName: "",
        seriesId: "",

        modelName: "",
        shortName: "",
        seriesGroupName: "",
        seriesGroupId: "",
        price: "",
        year: "",
        makerId: "",
        makerName: "",

        // 车辆信息
        liter: "",
        dischargeStandard: "",
        fuelTypeId: "",
        fuelTypeName: "",
        enginePower: "",
        enginePowerKw: "",
        isGreen: "",
        modelCode: "",
        driveName: "",
        driveType: "",
        modelStatus: "",
        gearType: "",
        gearName: "",
        greenTypeId: "",
        greenTypeName: "",
        makerDate: "",
        minRegYear: "",
        maxRegYear: "",
        stopMakeYear: "",
        intake: "",
        seatNumber: "",
        bodyType: "",
        doorNumber: "",
        carStruct: "",
        isParallel: "",
        priceAllowance: "",
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },

    /** 重置按钮操作 */
    resetQuery() {

      this.resetForm("queryForm");
      this.handleQuery();
    },

    /** 新增操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.isNew = true
      this.title = "新增";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.isNew = true
      this.loading = true;
      this.reset();
      const id = row.id || this.ids
      getCarBasic(id).then(response => {

        this.loading = false;
        this.form = response.data;
        this.form.maxRegYear = response.data.maxRegYear + ""
        this.form.minRegYear = response.data.minRegYear + ''
        this.form.stopMakeYear = response.data.stopMakeYear + ''
        this.form.brandId = response.data.carBrandId
        this.form.seriesId = response.data.carSeriesId
        this.form.seriesGroupId = response.data.carSeriesGroupId

        this.getSeriesNames(this.form.brandId)


        this.getSeriesGroup({ brandName: this.form.brandName, carBrandId: this.form.brandId })
        this.open = true;
        this.title = "编辑";


      });
      this.$forceUpdate();
    },
    viewOpen(row) {
      this.$router.push({ path: "/wxgl/maintenanceDetails", query: { plan: 'private' } })
      // this.isNew = false
      // this.loading = true;
      // this.reset();
      // const id = row.id || this.ids
      // getCarBasic(id).then(res => {
      //   this.loading = false;
      //   this.form = res.data;
      //   this.open = true;
      //   this.title = "查看";
      // });
    },
    handleAc(row, num) {
      const ids = row.id || this.ids;
      this.$modal.confirm(`是否${num == 1 ? '启用' : '停用'}该车型？`).then(() => {
        this.loading = true;
        return updateCar({ id: ids, isAvailable: num });
      }).then(() => {
        this.loading = false;
        this.getList();
        this.$modal.msgSuccess("处理成功");
      }).finally(() => {
        this.loading = false;
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.buttonLoading = true;
          if (this.form.id) {
            updateCar(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            }).finally(() => {
              this.buttonLoading = false;
            });
          } else {
            carBrandAdd(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            }).finally(() => {
              this.buttonLoading = false;
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否删除该车型？').then(() => {
        this.loading = true;
        return delModel(ids);
      }).then(() => {
        this.loading = false;
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).finally(() => {
        this.loading = false;
      });
    },
    /** 导入按钮操作 */
    handleImport() {
      this.upload.title = "用户导入";
      this.upload.open = true;
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('car/carBrand/export', {
        ...this.queryParams
      }, `车型列表_${new Date().getTime()}.xlsx`)
    },
    /** 导出模板操作 */
    handleExportT() {
      this.download('car/carBasic/importTemplate', {
      }, `车型列表模板_${new Date().getTime()}.xlsx`)
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
      this.getList();
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    }
  }
};
</script>
    
  
<style lang="scss" scoped>
.box-card {
  margin-bottom: 20px;
  font-size: 14px;
  .box-card-inp {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    .inp-name {
      width: 190px;
      text-align: right;
      font-size: 14px;
    }
  }

  .top-card {
    display: flex;

    img {
      display: block;
      width: 200px;
      height: 160px;
    }

    .top-card-right {
      margin-left: 20px;
      line-height: 32px;
    }
  }
}

// .form-dialog {
//   ::v-deep .el-dialog__header {
//     padding: 10px 20px;
//     border-bottom: 1px solid #DCDFE6;

//     .el-dialog__headerbtn {
//       top: 15px;
//     }
//   }

// .box-card {
//   margin-bottom: 20px;

//   .card-title {
//     font-size: 16px;
//     position: relative;
//     margin-left: 8px;
//     padding: 0;
//   }

//   .card-title::after {
//     content: '';
//     width: 4px;
//     height: 18px;
//     background-color: aqua;
//     display: block;
//     position: absolute;
//     left: -12px;
//     top: 2px;
//   }
// }

// }
</style>